<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            li {
                line-height: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <p>参考：https://zhuanlan.zhihu.com/p/86426949</p>
        <button id="btn">点击</button>
        <ul>
            <li>aaaa</li>
            <li>bbb</li>
            <li>cc</li>
            <li>d</li>
        </ul>
        <ul>
            <li>aaaa</li>
            <li>bbb</li>
            <li>cc</li>
            <li>d</li>
        </ul>
        <ul>
            <li>aaaa</li>
            <li>bbb</li>
            <li>cc</li>
            <li>d</li>
        </ul>
        <ul>
            <li>aaaa</li>
            <li>bbb</li>
            <li>cc</li>
            <li>d</li>
        </ul>
        <ul>
            <li>aaaa</li>
            <li>bbb</li>
            <li>cc</li>
            <li>d</li>
        </ul>
        <ul>
            <li>aaaa</li>
            <li>bbb</li>
            <li>cc</li>
            <li>d</li>
        </ul>
        <ul>
            <li>aaaa</li>
            <li>bbb</li>
            <li>cc</li>
            <li>d</li>
        </ul>
        <script>
            // 防抖
            function debounce(func, wait, immediate) {
                var timeout, result;
                var debounced = function () {
                    var _this = this;
                    var args = arguments;
                    if (timeout) clearTimeout(timeout);
                    timeout = setTimeout(function () {
                        result = func.apply(_this, args);
                    }, wait);
                    return result;
                };
                return debounced;
            }

            // var debounce = function (cb, delay) {
            //     console.log('debounced ... ');
            //     let times = Date.now();
            //     let timeout = null;
            //     return function () {
            //         var _this = this;
            //         var args = arguments;
            //         console.log('触发防抖回调。。。。', times - times);
            //         times = Date.now();
            //         if (Date.now() - times < 1000) {
            //             clearTimeout(timeout);
            //         }
            //         timeout = setTimeout(() => {
            //             console.log('setTimeout ... ', Date.now() - times < 1000, delay);
            //             // cb(args);
            //             cb.apply(_this, args);
            //         }, delay);
            //     };
            // };

            // 处理函数
            // function handle(a) {
            //     console.log('==> ', a);
            // }

            // 滚动事件
            // window.addEventListener(
            //     'scroll',
            //     debounce(function () {
            //         // console.log(' 执行结果 ', Math.floor((Math.random() * 100) / 10));
            //         handle(Math.floor((Math.random() * 100) / 10));
            //     }, 1000)
            // );

            let ddd = debounce(function (pp) {
                console.log('ddd...', pp, arguments);
            }, 1000);

            setTimeout(() => ddd(1), 2000);
            setTimeout(() => ddd(2), 4000);
            setTimeout(() => ddd(3), 6000);
            setTimeout(() => ddd(4), 8000);
        </script>
    </body>
</html>
